<template>
    <div>
        <el-col>
            <el-menu :default-active="activatedItem"  class="el-menu-vertical-demo" background-color="#545c64"
                text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="classroom" @click="toClassroom">
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">教室信息</span>
                </el-menu-item>
                <el-menu-item index="RoomUsageTable" @click="toRoomUasge">
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">教室使用情况</span>
                </el-menu-item>
                <el-menu-item index="courseInfos" @click="toCourse" >
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">课程列表</span>
                </el-menu-item>                
                <el-menu-item index="classroomTable" @click="toClassroomTable" id="login">
                    <i class="el-icon-user-solid"></i>
                    <span slot="title">班级列表</span>
                </el-menu-item>
                <el-menu-item index="user" @click="toAnalysis">
                    <i class="el-icon-s-management"></i>
                    <span slot="title">用户信息</span>
                </el-menu-item>
                <el-menu-item index="logout" @click="toLogout">
                    <i class="el-icon-setting"></i>
                    <span slot="title">退出系统</span>
                </el-menu-item>
                <br><br><br><br><br>
                <br><br><br><br><br>
                <br>
            </el-menu>
        </el-col>
    </div>
</template>
  
<script>
import axios from 'axios'
export default {
    name: 'Navi',
    data() {
        return {
            activatedItem: this.$route.name
        }
    },
    methods: {
        toUserInfo() {
            this.$router.push({
                name: "userInfo"
            })
        },
        toClassroomTable() {
            this.$router.push({
                name: "classroomTable"
            })
        },
        toCourse() {
            this.$router.push({
                name: "courseInfos"
            })
        },
        toClassroom() {
            this.$router.push({
                name: "classroom"
            })
        },
        toRoomUasge() {
            this.$router.push({
                name: "RoomUsageTable"
            })
        },
        async toStudentsList() {
            var token = await sessionStorage.getItem("token");
            if (token === null) {
                await this.$alert('您还没有登录哦,请先登录!', '温馨提示', {
                    confirmButtonText: '知道啦',
                });
                // this.$refs["login"].click()
                document.getElementById("login").click();
            } else {
                this.$router.push({
                    name: "students"
                    // path:"/students"
                })
            }
        },
        toLogout() {
            axios({
                url: "http://localhost:8080/user/logout",
                method: "Post"
            }).then(() => {
                sessionStorage.clear();
                this.$router.push({
                    name: "login"
                })
            })
            // this.$bus.$emit('logout');
        },
        mounted() {
            if (this.$route.name == "classroom") {
                this.activatedItem = "classroom"
            }
            else if (this.$route.name == "course") {
                this.activatedItem = "course"
            }
            else if (this.$route.name == "teacher") {
                this.activatedItem = "teacher"
            }
            else if (this.$route.name == "class") {
                this.activatedItem = "class"
            }
            else if (this.$route.name == "user") {
                this.activatedItem = "user"
            }
            else if (this.$route.name == "logout") {
                this.activatedItem = "logout"
            }
        },

    }
}
</script>
  
<style scoped>

.el-menu-vertical-demo{
    height: 92vh;
  }
div {
    width: 200px
}
</style>